@import 'function';
// CSS封装思路：这个组件的CSS采用BEM的形式进行封装，对应的混合是@mixin b, @mixin e
// @mixin m,并根据传进来的名称封装成以el-k开头的选择器，例如，我传入scrollbar名称，则
// 会生成.el-scrollbar { } 的CSS，这里生成的是块BLOCK
@mixin b($block) {
    $B: $namespace + '-' + $block !global;
    .#{$B} {
        @content;
    }
}
// 这个是生成元素Element，比如滚动条元素，它由两个元素组成-bar和thumb,那么这个bar和thumb
// 就是.el-scrollbar的后缀，就会生成.el-scrollbar__bar {}CSS样式，$element可以是一个数组
// 或者是某个元素值
@mixin e($element) {
    $E: $element !global;
    // &指的是父选择器
    $selector: &;
    $currentSelector: '';
    // 这个循环生成一个以逗号隔开的选择器列表，如.el-scrollbar__thumb, .el-scrollbar__bar
    @each $unit in $element {
        $currentSelector: #{$currentSelector + '.' + $B + $element-separator + $unit + ','};
    }
    // 判断选择器中是否包含M、is-或者伪类
    @if hitAllSpecialNestRule($selector) {
        @at-root {
          #{$selector} {
            #{$currentSelector} {
              @content;
            }
          }
        }
    } @else {
        // @at-root会强制CSS跳出嵌套放入根节点下
        @at-root {
          #{$currentSelector} {
            @content;
          }
        }
    }
}
// 最后一个就彻底生成了一个以BEM命名规范的CSS
@mixin m($modifier) {
    $selector: &;
    $currentSelector: "";
    @debug sss $selector;
    @each $unit in $modifier {
        // '' + [父元素选择器] + '--' + $unit + ','
        // 例如： '' + .el-scrollbar__wrap--hidden-default,
        $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","};
    }
    @at-root {
        #{$currentSelector} {
            @content;
        }
    }
}
// CSS状态样式
@mixin when($state) {
    @at-root {
        &.#{$state-prefix + $state} {
            @content;
        }
    }
}